<script props>
  module.exports = {
    // Set the main language of pages below.
    lang: 'en',
    title: props.title || 'Unnamed page',
    // Set a name for a preloaded font. Must be a file name without extension.
    preloadedFontName: 'SourceSansPro-Regular',
    justValidate: props.justValidate,
    inputmask: props.inputmask,
    swiper: props.swiper,
    typed: props.typed,
    photoSwipe: props.photoSwipe,
    noUiSlider: props.noUiSlider,
    toggleBySwipe: props.toggleBySwipe,
    horizontalMouseScroll: props.horizontalMouseScroll,
    dialogs: props.dialogs,
    mouseParallax: props.mouseParallax,
    autoScrollPadding: props.autoScrollPadding,
    tabs: props.tabs,
    stepByStep: props.stepByStep,
    observerTools: props.observerTools,
    scrollTimeline: props.scrollTimeline,
    infiniteScroll: props.infiniteScroll,
    styles: isArray(props.styles) ? props.styles : [],
    scripts: isObject(props.scripts) ? props.scripts : {},
  }
</script>

<!DOCTYPE html>
<html lang="{{ lang }}">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--? ↓ Disables forced link for phone number on iOS -->
    <meta name="format-detection" content="telephone=no" />
    <meta name="description" content="description" />
    <meta name="theme-color" content="#000000" />
    <link rel="icon" href="./images/favicon.svg" />
    <link rel="mask-icon" href="./images/favicon.svg" color="#000000" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />

    <if condition='preloadedFontName != "none"'>
      <link
        rel="preload"
        href="./fonts/{{ preloadedFontName }}.woff2"
        as="font"
        type="font/woff2"
        crossorigin
      />
    </if>

    <title>{{ title }}</title>

    <!-- /-/ General stylesheets -->
    <link rel="stylesheet" href="./styles/fonts.css" />
    <link rel="stylesheet" href="./styles/normalize.css" />
    <link rel="stylesheet" href="./styles/index.css" />

    <!-- /-/ General scripts -->
    <if condition="justValidate">
      <!-- JustValidate -->
      <script type="module" src="./assets/justValidate/index.js"></script>
    </if>

    <if condition="inputmask">
      <!-- Inputmask -->
      <script defer src="./assets/inputmask.min.js"></script>
    </if>

    <if condition="swiper || stepByStep">
      <!-- Swiper -->
      <link rel="stylesheet" href="./assets/swiper/swiper-bundle.min.css" />
      <script type="module" src="./assets/swiper/index.js"></script>
    </if>

    <if condition="typed">
      <!-- Typed -->
      <script defer src="./assets/typed/typed.min.js"></script>
      <script defer src="./assets/typed/index.js"></script>
    </if>

    <if condition="photoSwipe">
      <!-- PhotoSwipe -->
      <script type="module" src="./assets/photoSwipe/index.js"></script>
      <link rel="stylesheet" href="./assets/photoswipe/photoswipe.css" />
    </if>

    <if condition="noUiSlider">
      <!-- NoUiSlider -->
      <link href="./assets/noUiSlider/nouislider.min.css" rel="stylesheet" />
      <script type="module" src="./assets/noUiSlider/index.js"></script>
    </if>

    <if condition="observerTools">
      <!-- Observer Tools -->
      <script type="module" src="./scripts/observerTools/index.js"></script>
    </if>

    <if condition="scrollTimeline">
      <script src="./scripts/scroll-timeline.src.js"></script>
    </if>

    <if condition="toggleBySwipe">
      <!-- Toggle by swipe -->
      <script type="module" src="./scripts/toggleBySwipe/index.js"></script>
      <link rel="stylesheet" href="./scripts/toggleBySwipe/index.css" />
    </if>

    <if condition="horizontalMouseScroll">
      <!-- Horizontal scroll -->
      <script type="module" src="./scripts/horizontalMouseScroll.js"></script>
    </if>

    <if condition="dialogs">
      <!-- For dialogs -->
      <link rel="stylesheet" href="./scripts/dialogs/index.css" />
      <script type="module" src="./scripts/dialogs/index.js"></script>
    </if>

    <if condition="mouseParallax">
      <!-- MouseParallax -->
      <script type="module" src="./scripts/mouseParallax/index.js"></script>
    </if>

    <if condition="autoScrollPadding">
      <!-- For scroll padding -->
      <script type="module" src="./scripts/autoScrollPadding/index.js"></script>
    </if>

    <if condition="tabs">
      <!-- Tabs -->
      <script src="./scripts/tab/index.js"></script>
      <link rel="stylesheet" href="./scripts/tab/index.css" />
    </if>

    <if condition="stepByStep">
      <!-- StepByStep -->
      <script type="module" src="./scripts/stepByStepBlock/index.js"></script>
    </if>
    <if condition="infiniteScroll">
      <!-- Infinite Scroll -->
      <script src="./scripts/infiniteScroll/index.js"></script>
    </if>

    <!-- /-/ Other stylesheets and scripts for this page -->
    <stack name="styles"></stack>
    <stack name="scripts"></stack>
  </head>

  <body id="index">
    <if condition="$slots.header?.filled">
      <x-header></x-header>
    </if>

    <main>
      <yield></yield>
    </main>

    <if condition="$slots.footer?.filled">
      <x-footer></x-footer>
    </if>
  </body>

  <!-- Made in Russia, with ❤, by Ivan Ulyanov. -->
</html>